import React from 'react';
import { Divider } from 'antd';
import { Toolbar } from 'gg-editor';
import ToolbarButton from './ToolbarButton';
import styles from './index.less';

const FlowToolbar = ({ setShowJson, flowData }) => {
  return (
    <Toolbar className={styles.toolbar}>
      <ToolbarButton command="undo" text="后退" />
      <ToolbarButton command="redo" text="前进" />
      <Divider type="vertical" />
      <ToolbarButton command="copy" text="复制" />
      <ToolbarButton command="paste" text="粘贴" />
      <ToolbarButton command="delete" text="删除" />
      <Divider type="vertical" />
      <ToolbarButton
        command="zoomIn"
        icon="zoom-in"
        text="Zoom In"
        text="放大"
      />
      <ToolbarButton
        command="zoomOut"
        icon="zoom-out"
        text="Zoom Out"
        text="缩小"
      />
      <ToolbarButton
        command="autoZoom"
        icon="fit-map"
        text="Fit Map"
        text="全部显示"
      />
      <ToolbarButton command="resetZoom" icon="actual-size" text="原比例" />
      <Divider type="vertical" />
      <ToolbarButton command="toBack" icon="to-back" text="下移一层" />
      <ToolbarButton command="toFront" icon="to-front" text="上移一层" />
      <Divider type="vertical" />
      <ToolbarButton
        command="multiSelect"
        icon="multi-select"
        text="多选模式"
      />
      <Divider type="vertical" />
      <ToolbarButton
        command="switchWorkspace"
        icon="iconjson"
        text="Json视图"
        onClick={() => setShowJson(true)}
      />
      <ToolbarButton
        command="switchWorkspace"
        icon="icondesign"
        text="编辑视图"
        onClick={() => setShowJson(false)}
      />
      <ToolbarButton
        command="switchWorkspace"
        icon="icondesign"
        text="查看JSON"
        onClick={() => console.log(flowData)}
      />
    </Toolbar>
  );
};

export default FlowToolbar;
